<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Bill Of Materials</title>
    </h:head>
    <h:form prependId="false">
        <p:growl id="notif" showDetail="true"/>  
        <h:body>
            <p:growl id="msgs" showDetail="true"/>
            <f:view beforePhase="#{UserDisplayManagedBean.doDisplay}">
                <f:view beforePhase="#{BillOfMaterialManagedBean.initView}">
                    <!-- IDLE DIALOG for -->
                    <p:confirmDialog message="You have been idle for 5 minutes. Do you want to continue?"  
                                     showEffect="bounce" hideEffect="explode"  
                                     header="Warning message" severity="alert" widgetVar="confirmation">  
                        <p:commandButton value="Yes" onclick="confirmation.hide()" type="button" /> 
                        <p:commandButton value="No" update="panel" oncomplete="confirmation.hide()"  
                                         actionListener="#{UserManagedBean.doLogout}" /> 
                    </p:confirmDialog>

                    <p:idleMonitor timeout="300000" onidle="confirmation.show()" />  
                    <!--END OF IDLE DIALOG-->

                    <div id="header">
                        <h:graphicImage value="/image/newHeader.jpg"/>
                    </div>

                    <div id="content">
                        <table>
                            <tr>
                                <td style="vertical-align:top">
                                    <p:toolbar style="background-color:darkred;font-size:90%;height:35px;width:210px"> 
                                        <p:toolbarGroup align="right">
                                            <p:button title="Home" image="ui-icon-home" outcome="ManufacturingDeptWorkspace"/>
                                            <p:button title="Notes" image="ui-icon-note"/>
                                            <p:button title="Mail" image="ui-icon-mail-closed"/>
                                            <p:button title="Edit Preferences" image="ui-icon-gear"/>
                                            <p:button title="Help" image="ui-icon-help"/>
                                            <p:commandButton immediate="true" type="submit" image="ui-icon-close" actionListener="#{UserManagedBean.doLogout}"/> 
                                        </p:toolbarGroup>
                                    </p:toolbar>

                                    <p:menu id="menu" style=" width:206px;height: 685px;font-family: Tahoma;border-style: double;font-size: 80%">  
                                        <p:submenu label="Manufacturing Menu">  
                                            <p:menuitem value="Manufacturing Dept Home" url="http://localhost:8080/MerlionERP-war/MRP/ManufacturingDeptWorkspace.xhtml" ajax="false" icon="ui-icon ui-icon-home"/>  
                                        </p:submenu>
                                        <p:submenu label="Production Planning">
                                            <p:menuitem value="View Sales Record" url="http://localhost:8080/MerlionERP-war/MRP/SalesRecord.xhtml" ajax="false" icon="ui-icon ui-icon-search"/>  
                                            <p:menuitem value="View Sales Forecast" url="http://localhost:8080/MerlionERP-war/MRP/SalesForecast.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                            <p:menuitem value="View Sales and Operation Plan" url="http://localhost:8080/MerlionERP-war/MRP/SalesAndOperationPlan.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                        <p:submenu label="Master Production Schedule">
                                            <p:menuitem value="View MPS Weekly" url="http://localhost:8080/MerlionERP-war/MRP/MasterProductionScheduleWeekly.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                            <p:menuitem value="View MPS Daily" url="http://localhost:8080/MerlionERP-war/MRP/MasterProductionScheduleDaily.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                            <p:menuitem value="Commit MPS" url="http://localhost:8080/MerlionERP-war/MRP/CommitMasterProductionSchedule.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                        <p:submenu label="Material Planning">
                                            <p:menuitem value="View Requirement Planning" url="http://localhost:8080/MerlionERP-war/MRP/MaterialRequirementPlanning.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                        <p:submenu label="Bill of Materials">
                                            <p:menuitem value="View Bill of Materials" url="http://localhost:8080/MerlionERP-war/MRP/BillOfMaterials.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                         <p:submenu label="Production Execution">
                                            <p:menuitem value="Production Execution" url="http://localhost:8080/MerlionERP-war/MRP/ProductionExecution.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                    </p:menu>
                                    <p:calendar mode="inline" style="font-size:11px;font-family:Tahoma"/>
                                </td>

                                <td style=" vertical-align: top">
                                    <h:graphicImage value="bill.jpeg" style="width:45px;height:35px" />
                                    <h:outputText value="         "/>
                                    <h:outputText value="Bill Of Materials" style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                                    <p:spacer width="100" height="10"/>


                                    <p:panel id="panel" style=" font-family: Tahoma;width:1120px;height:850px">
                                        <h:panelGrid columns="3">
                                            <h:outputText value="Product"/>
                                            <h:outputText value=":"/>
                                            <h:selectOneMenu required="true" requiredMessage="Please choose one product!" value="#{BillOfMaterialManagedBean.productId}">
                                                <f:selectItem itemLabel="Select Product ID" itemValue=""/>
                                                <f:selectItems value="#{BillOfMaterialManagedBean.products}" var="products"
                                                               itemLabel ="#{products.name}" itemValue="#{products.itemId}"/> 
                                                <p:ajax update="display1 prodialog materials batchUnit batchSize productID" listener="#{BillOfMaterialManagedBean.doHandleUpdateBillOfMaterials}"/>
                                            </h:selectOneMenu> 
                                        </h:panelGrid>
                                        <p:spacer style=" border-bottom-style: inset" width="1095px" height="30px"/>
                                        <p:spacer height="20px"/>
                                        <table>
                                            <tr>
                                                <td><h:outputText value="Product ID"/></td>
                                                <td><h:outputText value=":"/></td>
                                                <td><h:outputText id="productID" value="#{BillOfMaterialManagedBean.productId}"/></td>
                                            </tr>
                                            <tr>
                                                <td><h:outputLabel for="batchSize" value="Batch Size"/></td>
                                                <td><h:outputText value=":"/></td>
                                                <td><p:inputText id="batchSize" value="#{BillOfMaterialManagedBean.batchSize}">
                                                        <p:ajax />
                                                    </p:inputText>
                                                </td>
                                                <td><h:outputText value="("/><p:inputText id="batchUnit" value="#{BillOfMaterialManagedBean.batchUnit}"><p:ajax/></p:inputText><h:outputText value=")"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td><p:commandButton value="Save Changes" update="msgs" immediate="true" ajax="true" actionListener="#{BillOfMaterialManagedBean.doUpdateBatchSize}"/>
                                                </td>
                                            </tr>
                                        </table>
                                        <p:spacer height="40px"/>
                                        <p:dataTable id="materials" 
                                                     var="materials" value="#{BillOfMaterialManagedBean.entries}"                       
                                                     paginator="true" rows="5"
                                                     rowEditListener="#{BillOfMaterialManagedBean.onEditRow}"
                                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                     rowsPerPageTemplate="5,10"  style="font-size:70%;width:600px;"
                                                     emptyMessage="No data found with given criteria" widgetVar="BOMTable">  

                                            <f:facet name="header">
                                                <h2>BILL OF MATERIALS FOR SELECTED PRODUCT</h2>
                                                <p:toolbar style="background-color:  #d9bb73;font-size: 70%;width:100%"> 
                                                    <p:toolbarGroup align="right">  
                                                        <p:commandButton value="New Material" onclick="editDialog.show()"
                                                                         image="ui-icon-plus" />
                                                    </p:toolbarGroup>  
                                                </p:toolbar>
                                                <p:outputPanel style="text-align:right"  >
                                                    <h:outputText value="Search all fields:" style="margin-left:240px" />  
                                                    <p:inputText id="globalFilter" onkeyup="BOMTable.filter()" style="right:-100px;width:150px" />  
                                                </p:outputPanel>
                                            </f:facet>

                                            <!--EDIT-->   
                                            <p:column style="width:10px; border-left-color:transparent;border-right-color:transparent">
                                                <f:facet name="header">
                                                    <h:outputText value="Edit"/>
                                                </f:facet>
                                                <p:rowEditor  />
                                            </p:column>
                                            <!--DELETE-->
                                            <p:column style="width:20px;border-left-color:transparent;">
                                                <f:facet name="header">
                                                    <h:outputText value="Del."/>
                                                </f:facet>
                                                <p:commandButton title="Delete" image="ui-icon ui-icon-trash" ajax="true" immediate="true"
                                                                 update="display" oncomplete="customerdialog.show()">
                                                    <f:setPropertyActionListener target="#{BillOfMaterialManagedBean.entry}"
                                                                                 value="#{materials}"/>
                                                </p:commandButton>
                                            </p:column>

                                            <p:column style="width: 100px" sortBy="#{materials.materialId}" filterBy="#{materials.materialId}" filterMatchMode="contains">
                                                <f:facet name="header">
                                                    <h:outputText value="Material ID"/> 
                                                </f:facet>
                                                <h:outputText value="#{materials.materialId}"/>
                                            </p:column>
                                            
                                             <p:column style="width: 100px" sortBy="#{materials.materialName}" filterBy="#{materials.materialName}" filterMatchMode="contains">
                                                <f:facet name="header">
                                                    <h:outputText value="Material Name"/> 
                                                </f:facet>
                                                <h:outputText value="#{materials.materialName}"/>
                                            </p:column>

                                            <p:column headerText="Quantity" style="width: 100px" sortBy="#{materials.quantity}" filterBy="#{materials.quantity}" filterMatchMode="contains">
                                                <p:cellEditor>
                                                    <f:facet name="output">
                                                        <h:outputText value="#{materials.quantity}"/>
                                                    </f:facet>
                                                    <f:facet name="input">
                                                        <p:inputText value="#{materials.quantity}"/>
                                                    </f:facet>
                                                </p:cellEditor>
                                            </p:column>

                                            <p:column style="width: 100px" sortBy="#{materials.unit}" filterBy="#{materials.unit}" filterMatchMode="contains">
                                                <f:facet name="header">
                                                    <h:outputText value="Unit"/> 
                                                </f:facet>
                                                <h:outputText value="#{materials.unit}"/>
                                            </p:column>


                                        </p:dataTable>

                                        <!--DIALOG FOR DELETING A  SINGLE ROW-->
                                        <p:confirmDialog message="Are you sure you want to delete this material record?"  
                                                         showEffect="blind" hideEffect="explode"  
                                                         header="Delete A Material Record" severity="alert" widgetVar="customerdialog">  
                                            <p:commandButton value="Yes" update="panel" ajax="true" immediate="true" oncomplete="customerdialog.hide()"  
                                                             actionListener="#{BillOfMaterialManagedBean.doDelete}" />  
                                            <p:commandButton value="No" onclick="customerdialog.hide()" type="button" />   
                                        </p:confirmDialog>

                                        <!--DIALOG FOR VIEW-->
                                        <p:dialog header="MATERIALS DETAILS" widgetVar="editDialog" resizable="false"  
                                                  width="800" showEffect="explode" hideEffect="explode">  
                                            <center> 
                                                <h:panelGrid id="display1" columns="3" cellpadding="4">  

                                                    <h:outputText value="Product ID" />  
                                                    <h:outputText value=":" /> 
                                                    <h:outputText id="prodialog" value="#{BillOfMaterialManagedBean.productId}-#{BillOfMaterialManagedBean.productName}"/>
                                             
                                                    <h:outputText value="Material ID" />  
                                                    <h:outputText value=":" /> 
                                                    <h:selectOneMenu required="true" requiredMessage="Please choose one material!" value="#{BillOfMaterialManagedBean.materialId}">
                                                        <f:selectItem itemLabel="Select An Ingredient" itemValue=""/>
                                                        <f:selectItems value="#{BillOfMaterialManagedBean.materials}" var="materials"
                                                                       itemLabel ="#{materials.itemId}-#{materials.name}" itemValue="#{materials.itemId}"/> 
                                                    </h:selectOneMenu>  


                                                    <h:outputText value="Quantity" />  
                                                    <h:outputText value=":" /> 
                                                    <p:inputText value="#{BillOfMaterialManagedBean.quantity}"/>

                                                    <h:outputText value="Unit" />  
                                                    <h:outputText value=":" /> 
                                                    <h:selectOneMenu value="#{BillOfMaterialManagedBean.unit}" required="true" requiredMessage="Choose one Unit">
                                                        <f:selectItem itemLabel="Select a Unit" itemValue=""/>
                                                        <f:selectItem itemLabel="kg" itemValue="kg"/>
                                                        <f:selectItem itemLabel="l" itemValue="l"/>

                                                    </h:selectOneMenu>
                                                    <center>
                                                        <p:commandButton value="Add Record" ajax="true" update="panel childPanel" immediate="false" actionListener="#{BillOfMaterialManagedBean.doAddNewRecord}"   
                                                                         image="ui-icon ui-icon-disk" />  
                                                        <p:commandButton value="Cancel" onclick="editDialog.hide()" type="button" image="ui-icon ui-icon-close"/>  

                                                    </center>
                                                </h:panelGrid> 
                                            </center>
                                        </p:dialog> 

                                    </p:panel>

                                </td>
                            </tr>
                        </table>

                    </div>

                    <div id="footer">
                        <h:graphicImage value="/image/merlionfooter.jpg"/>
                    </div>
                </f:view>
            </f:view>
        </h:body>
    </h:form>

</html>

